<template>
  <div class='container'>
    <div class="questionsHeader">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button @click="newQuestions" class="headerBtn" type="success" icon="el-icon-edit">新增试题</el-button>
    </div>
    <el-form class="formstyle" :model="formData" ref="formData">
      <!-- 第一行表单  -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" label-width="80px" prop="subjectID">
            <el-select placeholder="请选择" v-model="formData.subjectID">
              <el-option @click.native="subjectIDName" v-for="i in formData.subjectList" :key="i.id" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目录" label-width="80px" prop="catalogID">
            <el-select placeholder="请选择" v-model="formData.catalogID">
              <el-option @click.native="catalogName" v-for="i in formData.catalogList" :key="i.id" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" label-width="80px" prop="tags">
            <el-select placeholder="请选择" v-model="formData.tags">
              <el-option v-for="i in formData.tagsList" :key="i.id" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" label-width="80px" prop="keyword">
            <el-input class="keyword" v-model="formData.keyword"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行表单  -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型" label-width="80px" prop="questionType">
            <el-select placeholder="请选择" v-model="formData.questionType">
              <el-option v-for="i in questionTypeList" :key="i.id" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" label-width="80px" prop="difficulty">
            <el-select placeholder="请选择" v-model="formData.difficulty">
              <el-option v-for="i in difficultyList" :key="i.id" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" label-width="80px" prop="direction">
            <el-select placeholder="请选择" v-model="formData.direction">
              <el-option v-for="i in directionList" :key="i.id" :label="i" :value="i"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" label-width="80px" prop="creatorID">
            <el-select placeholder="请选择" v-model="formData.creatorID">
              <el-option v-for="i in formData.creatorIDList" :key="i.id" :label="i.username" :value="i.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行表单  -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px" prop="remarks">
            <el-input class="keyword" v-model="formData.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" label-width="80px" prop="shortName">
            <el-input class="keyword" v-model="formData.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" label-width="80px" prop="city">
            <el-col :span="11">
              <el-select placeholder="请选择" style="width: 100%;" v-model="formData.city">
                <el-option @click.native="cityName" v-for="i in cityList" :key="i.id" :label="i" :value="i"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1" style="height: 36px;"></el-col>
            <el-col :span="12">
              <el-select prop="province" placeholder="请选择" style="width: 100%;" v-model="formData.province">
                <el-option v-for="i in formData.provinceList" :key="i.id" :label="i" :value="i"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="button-style">
            <el-button @click="resetForm('formName')">清除</el-button>
            <el-button @click="searchButton" type="primary">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="el-table"><i class="el-icon-info"></i>数据一共 {{counts}} 条</div>
    <!-- 列表 -->
    <el-table :data="items" stripe style="width: 100%">
      <el-table-column prop="id" label="试题编号" width="80"></el-table-column>
      <el-table-column prop="subject" label="学科" width="80"></el-table-column>
      <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
      <el-table-column prop="questionType" label="题型" width="80"></el-table-column>
      <el-table-column prop="question" label="题干" width="250">
        <template v-slot='Props'>
          <p v-html="Props.row.question"></p>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200">
        <template v-slot='slotProps'>
          <p>{{slotProps.row.addDate | formData}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="80"></el-table-column>
      <el-table-column prop="creator" label="录入人" width="80"></el-table-column>
      <el-table-column label="操作" v-slot="scope">
        <el-button @click="previewBtn(scope.row.id)" type="primary" icon="el-icon-view" plain circle></el-button>
        <el-button @click="editBtn(scope.row.id)" type="success" icon="el-icon-edit" plain circle></el-button>
        <el-button @click="deleteBtn(scope.row.id)" type="danger" icon="el-icon-delete" plain circle></el-button>
        <el-button @click="addBtn(scope.row.id)" type="warning" icon="el-icon-check" plain circle></el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="changePager" :current-page="page" background :total="counts" layout="prev, pager, next, jumper, sizes, slot, ->, total" :page-count="page">
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" destroy-on-close="false">
      <span>
        <!-- 第一部分 -->
        <div class="row-height">
          <el-row>
            <el-col :span="6">【题型】:{{aDouble[0].label}}</el-col>
            <el-col :span="6">【编号】:{{dialogList.id}}</el-col>
            <el-col :span="6">【难度】:{{bDouble[0].label}}</el-col>
            <el-col :span="6">【标签】:{{dialogList.tags}}</el-col>
          </el-row>
          <el-row class="row-boder">
            <el-col :span="6">【学科】:{{dialogList.subjectName}}</el-col>
            <el-col :span="6">【目录】:{{dialogList.directoryName}}</el-col>
            <el-col :span="6">【方向】:{{dialogList.direction}}</el-col>
          </el-row>
        </div>
        <!-- 第二部分 -->
        <el-row class="row-boder">
          <el-col class="row-padding" :span="24">
            <p>【题干】:</p>
            <p v-html="dialogList.question" style="color: blue;"></p>
            <p>{{aDouble[0].label}} 选项: （以下选中的选项为正确答案）</p>
            <p v-if="dialogList.questionType == 1">
              <el-radio-group v-model="radio">
                <el-radio v-for="items in dialogList.options" :key="items.code" :label="items.isRight">
                  {{items.code}} : {{items.title}}
                </el-radio>
                <!-- <el-radio v-model="radio" :label="dialogList.options[0].isRight">{{dialogList.options[0].code}} : {{dialogList.options[0].title}}</el-radio>
                <el-radio v-model="radio" :label="dialogList.options[1].isRight">{{dialogList.options[1].code}} : {{dialogList.options[1].title}}</el-radio>
                <el-radio v-model="radio" :label="dialogList.options[2].isRight">{{dialogList.options[2].code}} : {{dialogList.options[2].title}}</el-radio>
                <el-radio v-model="radio" :label="dialogList.options[3].isRight">{{dialogList.options[3].code}} : {{dialogList.options[3].title}}</el-radio> -->
              </el-radio-group>
            </p>
            <p v-if="dialogList.questionType == 2">
              <el-checkbox-group v-model="radioAry">
                <el-checkbox v-for="items in dialogList.options" :key="items.code" :label="items.isRight">{{items.code}} : {{items.title}}</el-checkbox>
                <!-- <el-checkbox :checked="dialogList.options[0].isRight == 1 ? true : false" :label="dialogList.options[0].isRight">{{dialogList.options[0].code}} : {{dialogList.options[0].title}}</el-checkbox>
                <el-checkbox :checked="dialogList.options[1].isRight == 1 ? true : false" :label="dialogList.options[1].isRight">{{dialogList.options[1].code}} : {{dialogList.options[1].title}}</el-checkbox>
                <el-checkbox :checked="dialogList.options[2].isRight == 1 ? true : false" :label="dialogList.options[2].isRight">{{dialogList.options[2].code}} : {{dialogList.options[2].title}}</el-checkbox>
                <el-checkbox :checked="dialogList.options[3].isRight == 1 ? true : false" :label="dialogList.options[3].isRight">{{dialogList.options[3].code}} : {{dialogList.options[3].title}}</el-checkbox>
                <el-checkbox :checked="dialogList.options[4].isRight == 1 ? true : false" :label="dialogList.options[4].isRight">{{dialogList.options[4].code}} : {{dialogList.options[4].title}}</el-checkbox> -->
              </el-checkbox-group>
            </p>
            <p v-if="dialogList.questionType == 3"></p>
          </el-col>
        </el-row>
        <!-- 第三部分 -->
        <el-row class="row-boder row-padding">
          <el-col :span="24">【参考答案】:<el-button @click.native="videoResolution" type="danger" size="mini">视频答案预览</el-button>
          </el-col>
          <video style="width: 100%;" ref="videos" v-if="videoURL" :src="videoURL" controls></video>
        </el-row>
        <!-- 第四部分 -->
        <el-row class="row-boder row-padding">
          <el-col :span="24">【答案解析】:<span v-html="dialogList.answer"></span></el-col>
        </el-row>
        <!-- 第五部分 -->
        <el-row class="row-height">
          <el-col :span="24">【题目备注】:{{dialogList.remarks}}</el-col>
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="videoButton">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as questions from '@/api/hmmm/questions.js'
import * as subjects from '@/api/hmmm/subjects.js'
import * as directorys from '@/api/hmmm/directorys.js'
import * as tags from '@/api/hmmm/tags.js'
import * as constants from '@/api/hmmm/constants.js'
import * as users from '@/api/base/users.js'
import * as citys from '@/api/hmmm/citys.js'
import { parseTimeByString } from '@/filters/index.js'


export default {
  name: 'Questions',
  data () {
    return {
      formData: {
        // 企业所在省份
        province: '',
        provinceList: [],
        // 企业所在城市
        city: '',
        // 企业简称
        shortName: '',
        // 题目备注
        remarks: '',
        // 录入人
        creatorID: '',
        creatorIDList: [],
        // 方向
        direction: '',
        // 难度
        difficulty: '',
        // 试题类型
        questionType: '',
        // 关键字
        keyword: '',
        // 标签
        tags: '',
        tagsList: [],
        // 目录
        catalogID: '',
        catalogList: [],
        // 学科
        subjectID: '',
        subjectList: [],
      },
      id: '',
      // 企业所在城市     
      cityList: [],
      // 录入人
      creatorIDList: [],
      // 方向      
      directionList: [],
      // 难度      
      difficultyList: [],
      // 试题类型     
      questionTypeList: [],
      // 获取列表
      items: [],
      // 当前页数
      page: 1,
      // 当前尺寸
      pagesize: 10,
      // 总数
      counts: 0,
      // 控制弹窗状态
      dialogVisible: false,
      dialogList: [],
      // 答案选择
      radio: 1,
      radioAry: [1],
      videoURL: null,
      choiceState: 1
    }
  },
  computed: {
    // 题型
    aDouble: function () {
      if (!this.dialogList.questionType) {
        return [{}]
      }
      return constants.questionType.filter((etem) => {
        return etem.value === parseInt(this.dialogList.questionType)
      })
    },
    // 难度
    bDouble: function () {
      if (!this.dialogList.difficulty) {
        return [{}]
      }
      return constants.difficulty.filter((etem) => {
        return etem.value === parseInt(this.dialogList.difficulty)
      })
    }
  },
  filters: {
    formData (time) {
      return parseTimeByString(time)
    }
  },
  methods: {
    // 关闭按钮 视频关闭
    videoButton () {
      this.dialogVisible = false
      this.$refs.videos.pause()
    },
    // 新增试题
    newQuestions () {
      this.$router.push('/questions/new')
    },
    // 添加
    addBtn (id) {
      // console.log(choiceState)
      this.$confirm('确定添加吗').then(async () => {
        try {
          await questions.choiceAdd({
            id: id,
            choiceState: this.choiceState
          })
          this.questionsList()
        } catch (e) {
          console.log(e)
          this.$message.error('添加失败')
        }
      })
    },
    // 删除
    deleteBtn (id) {
      this.$confirm('确定删除吗').then(async () => {
        try {
          await questions.remove({
            id: id
          })
          this.questionsList()
        } catch (e) {
          console.log(e)
          this.$message.error('删除失败')
        }
      })
    },
    // 编辑
    editBtn (id) {
      this.$router.push('/questions/new?id=' + id)
    },
    // 视频播放
    videoResolution () {
      this.videoURL = this.dialogList.videoURL
      console.log(this.videoURL)
    },
    // 弹窗
    async previewBtn (id) {
      this.dialogVisible = true
      try {
        const ret = await questions.detail({
          id: id
        })
        this.dialogList = ret.data
      } catch (e) {
        console.log(e)
        this.$message.error('预览打开失败')
      }
    },
    changePager (page) {
      // 实现分页切换
      this.page = page
      this.questionsList()
    },
    // 搜索科目
    async searchButton () {
      try {
        console.log(this.formData.subjectID)
        const ret = await questions.list({
          subjectID: this.formData.subjectID,
          page: this.page,
          pagesize: this.pagesize
        })
        this.items = ret.data.items
      } catch (e) {
        console.log(e)
        this.$message.error('搜索失败')
      }
    },
    // 清除表单
    resetForm () {
      this.$refs.formData.resetFields();
    },
    // 地区获取
    cityName () {
      this.questionsProvince(this.formData.city)
    },
    // 地区
    async questionsProvince (c) {
      try {
        const ret = await citys.citys(c)
        this.formData.provinceList = ret
      } catch (e) {
        console.log(e)
        this.$message.error('地区获取失败')
      }
    },
    // 城市
    async questionsCitys () {
      try {
        const ret = await citys.provinces()
        this.cityList = ret
      } catch (e) {
        console.log(e)
        this.$message.error('城市获取失败')
      }
    },
    // 录入人
    async questionsCompanys () {
      try {
        const ret = await users.simple()
        this.formData.creatorIDList = ret.data
      } catch (e) {
        console.log(e)
        this.$message.error('获取人名失败')
      }
    },
    // 试题类型 难度 方向
    questionsQuestionType () {
      this.questionTypeList = constants.questionType
      this.difficultyList = constants.difficulty
      this.directionList = constants.direction
    },
    // 标签
    async questionsTags (c) {
      try {
        const ret = await tags.simple(c)
        this.formData.tagsList = ret.data
      } catch (e) {
        console.log(e)
        this.$message.error('获取标签失败')
      }
    },
    // 目录
    async questionsCatalog (s) {
      try {
        const ret = await directorys.simple(s)
        this.formData.catalogList = ret.data
      } catch (e) {
        console.log(e)
        this.$message.error('获取目录失败')
      }
    },
    catalogName () {
      this.questionsTags({
        subjectID: this.formData.subjectID
      })
    },
    // 学科
    async questionsSubjectID () {
      try {
        const ret = await subjects.simple()
        this.formData.subjectList = ret.data
      } catch (e) {
        console.log(e)
        this.$message.error('获取学科失败')
      }
    },
    subjectIDName () {
      this.questionsCatalog({
        subjectID: this.formData.subjectID
      })
    },
    // 基础题库列表
    async questionsList () {
      try {
        const ret = await questions.list({
          page: this.page,
          pagesize: this.pagesize
        })
        this.items = ret.data.items
        this.counts = ret.data.counts
        this.page = ret.data.pages
      } catch (e) {
        console.log(e)
        this.$message.error('获取题库列表失败')
      }
    }
  },
  created () {
    this.questionsList()
    this.questionsSubjectID()
    this.questionsQuestionType()
    this.questionsCompanys()
    this.questionsCitys()
    // console.log(constants.questionType)
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
  background-color: #fff;
  .el-table {
    line-height: 35px;
    padding: 0 10px;
    background-color: #f4f4f5;
    border-radius: 3px;
  }
  .questionsHeader {
    height: 32.5px;
    span {
      font-size: 12px;
      color: pink;
    }
    .headerBtn {
      float: right;
      margin-right: 10px;
    }
  }
  .formstyle {
    margin-top: 20px;
  }
  .row-padding {
    padding: 10px 0;
  }
}
.el-input {
  width: 65%;
}
.keyword {
  // margin-left: -15px;
  width: 182px;
}
.button-style {
  float: right;
}
.row-height {
  height: 36px;
  line-height: 36px;
}
.row-boder {
  border-bottom: 1px solid #000;
}
</style>
